Maintainable JavaScript — Removing Methods and Inheritance

Creating maintainable JavaScript code is important if want to keep using the code.

In this article, we’ll look at the basics of creating maintainable JavaScript code by looking at avoiding changing objects we don’t own.

Don’t Remove Methods

Removing methods from objects we didn’t create is also easy.

For instance, we can write:

document.getElementById = null;

Then we made document.getElementById null .

Now getElementById is no longer a function.

So we can’t call it.

Also, we cal delete properties with the delete operator.

delete operator works on regular objects, so we can write:

let person = {
  name: "james"
};
delete person.name;

and we remove the name property, so person.name would be undefined .

However, this operator has no effect on built-in library methods.

So if we write:

delete document.getElementById

that has no effect.

Removing existing methods is definitely a bad practice.

Developers expect the object to have methods described in the library documentation.

And existing code may be using the methods since everyone expected them to be there.

If we want to remove a method, then we should deprecate them so that they won’t be used for new code and will be removed from the existing code.

Then once they’re all gone, then we can remove it.

Removing would be the very last step.

Better Solutions

Modifying objects is definitely a bad idea.

We should adopt some common design patterns to avoid modifying objects we don’t own.

Object-Based Inheritance

One way to extend existing objects is to create a new object with whatever object we want as the prototype.

For instance, we can write:

const person = {
  name: "jane",
  sayName() {
    console.log(this.name);
  }
};

const student = Object.create(person);

We called Object.create with the person object as the prototype of the student object.

So we can call sayName on the student object since it’s inherited from person :

student.sayName();

Then we get 'jane' logged.

We can then define our own sayName method on student by writing:

const person = {
  name: "jane",
  sayName() {
    console.log(this.name);
  }
};

const student = Object.create(person);
student.sayName = function() {
  console.log('joe');
}

student.sayName()

Then we’ll see 'joe' logged instead of 'jane' .

Once the object is created, then we own it.

So we can do whatever we want with it without affecting other pieces of code and confusing people.

Type-Based Inheritance

Type-based inheritance works like object-based inheritance.

We inherit properties from a prototype.

But we create child classes or constructors instead of objects.

With ES6, we can create child classes by using the extends keyword.

For instance, we can create a subclass of Error by writing:

class Person {
  constructor(name) {
    this.name = name;
  }
}

class Author extends Person {}

We created the Author class which is a subclass of Person .

The extends keyword indicates that it’s a subclass.

This lets us create objects flexibly.

We can define any new properties and methods in the subclass to extend the Person class.

Conclusion

We shouldn’t remove methods from objects we don’t own so that no one will be confused.

Also, we don’t want to break existing code.

We can extend objects and classes to create the objects and classes we want.